<template>
  <div class="shopping-cart">
    <div class="shangPinH">
      购物车
    </div>
      <van-checkbox-group v-model="checked">
          <div class="shangPin">
      <div class="shangPinTop">
        <van-checkbox checked-color="red" name="a"  class="xUanZe" />
        <text class="top-left">单件包邮</text>
        <text class="top-right">以下商品已免邮</text>
      </div>
      <VanSwipeCell>
            <div class="shangPinBottom">
              <van-checkbox checked-color="red" name="a"  class="xUanZe  XUanZe" />
              <div class="bottom-top">
                <img src="../../static/微信图片_20221011160228.jpg" alt="" class="bTOP-left">
                <div class="bTop-right">
                  <div class="btrFIRST">
                    <text class="btrFIRST-l">每日抄底</text>
                    <text class="btrFIRST-r">黑猪鲜肉小笼包黑猪鲜肉小笼包黑猪鲜肉小笼包黑猪鲜肉小笼包</text>
                  </div>
                  <div class="btrSECOND">[共48只]原味*2+[共48只]原味*2+[共48只]原味*2</div>
                  <div class="btrTHIRD">距优惠结束 time</div>
                  <div class="btrEND">
                    <div class="btrEND-l">￥89</div>
                    <div class="btrEND-r">×1</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fooFTer">❕不可用券/红包</div>
            <template #right>
            <VanButton square type="danger" text="删除" class="shanChu"/>
            </template>
        </VanSwipeCell>
          </div>
          <div class="shangPin">
      <div class="shangPinTop">
        <van-checkbox checked-color="red" name="b"  class="xUanZe" />
        <text class="top-left">单件包邮</text>
        <text class="top-right">以下商品已免邮</text>
      </div>
      <VanSwipeCell>
            <div class="shangPinBottom">
              <van-checkbox checked-color="red" name="b"  class="xUanZe XUanZe" />
              <div class="bottom-top">
                <img src="../../static/微信图片_20221011160228.jpg" alt="" class="bTOP-left">
                <div class="bTop-right">
                  <div class="btrFIRST">
                    <text class="btrFIRST-l">每日抄底</text>
                    <text class="btrFIRST-r">黑猪鲜肉小笼包黑猪鲜肉小笼包黑猪鲜肉小笼包黑猪鲜肉小笼包</text>
                  </div>
                  <div class="btrSECOND">[共48只]原味*2+[共48只]原味*2+[共48只]原味*2</div>
                  <div class="btrTHIRD">距优惠结束 time</div>
                  <div class="btrEND">
                    <div class="btrEND-l">￥89</div>
                    <div class="btrEND-r">×1</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fooFTer">❕不可用券/红包</div>
            <template #right>
            <VanButton square type="danger" text="删除" class="shanChu"/>
            </template>
        </VanSwipeCell>
         </div>
      </van-checkbox-group>
     <div style="height: 100px;width: 100%;"></div>
      <div class="shoppingFooter">
       <div class="sf-l"><van-checkbox type="primary" @click="checkAll" >全选</van-checkbox></div>
       <div class="sf-r">合计:￥0<button>结算</button></div>
      </div>
  </div>

  
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
   const checked = ref([true]);

  </script>
  
  <style scoped>
  
  .shangPinH{
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    padding-left: 15px;

  }

  .shopping-cart{
    width: 100%;
    height: 100vh;
    background-color: rgb(244, 244, 244);
  }
  .shangPin{
    padding-top: 10px;
    margin: 20px;
    background-color: rgb(255,255,255);
    border-radius: 15px;
  }
  .shangPinTop{
    justify-content: space-between;
    margin-bottom:24px;
  }
  

  .shangPinBottom{
    width: 100%;
  }
  .INput{
    border-radius: 50%;
  }
  .top-left{
    font-size: 16px;
    font-weight: bold;
  }
  
  .XUAnZe{
    position: relative;
    top:20px;
  }
  .xUanZe{
    float: left;
    padding: 0 10px;
    margin: auto 0;
  }
  
  .XUanZe{
    position: relative;
    top: 35px;
  }
  .shanChu{
    height: 125px;
  }
  .bottom-top{
    margin-top: 12px;
  }
  .top-right{
    font-size: 8px;
    float: right;
  }
  
  .bTOP-left{
    width: 90px;
    height: 90px;
    float: left;
    border-radius: 5px;
  }
  .bTop-right{
    float: right;
    width: 200px;
  }
  
  .btrFIRST-l{
    float: left;
    font-size: 14px;
    color: red;
  }
  .text{
    width: 350px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .btrFIRST-r{
    float: left;
    font-size: 14px;
    width: 140px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: 3px;
  }
  .btrSECOND{
    width: 230px;
    white-space: nowrap;
  text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgb(244, 244, 244);
    border-radius: 40px;
    padding-left:5px ;
    height: 18px;
    margin-bottom: 5px;
  }
  
  .btrTHIRD{
    background-color: rgb(254,240,227);
    border-radius: 40px;
    padding-left:5px ;
    color: rgb(250,30,50);
  }
  
  .btrEND{
    margin-top:7px
  }
  
  .btrEND-l{
    color: rgb(250,30,50);
    font-size: 20px;
    float: left;
    font-weight: bold;
  }
  .btrEND-r{
    border-radius: 30px;
    border: 1px solid #000;
    float: right;
    width: 30px;
    font-size: 16px;
    margin-right: 20px;
    text-align: center;
  }
  
  .fooFTer{
    display: flex;
    width: 100%;
    height: 20px;
    padding-top:10px ;
  }
  .shoppingFooter{
    width: 100%;
    height: 60px;
    position: fixed;
    background-color: rgb(250,250,250);
    bottom: 50px;
    line-height: 60px;
  }
  
  .sf-l{
    font-size: 14px;
    float: left;
  }
  
  .sf-r{
    font-size: 14px;
    float: right;
    margin-right: 20px;
    color: #f00;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .sf-r button{
    font-size: 14px;
    width: 100px;
    height:40px;
    border-radius: 100px;
    margin-left: 20px;
    color: #fff;
    background-color: #f00;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
  
